import PlanBenefitsCard from '@COMPONENTS/PlanManagement/PlanBenefitsCard'
import React, { useCallback } from 'react'
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import { PicTextConsultationITF } from '@INTERFACES/PlanManagement'
import { COUPON_TITLE_ENUM } from '@CONSTANTS/coupon'
import Navigate from '@NAVIGATION/navigateManager'
import style from './PicTextRightCard.module.scss'
interface Props {
  picTextConsultation: PicTextConsultationITF;
  painManagementId: string
}
const TIP_TEXT = '名医专家随时问'
const PicTextRightCard: React.FC<Props> = ({ picTextConsultation, painManagementId }) => {
  const { ConsumedQuantity = 0, Quantity = 0 } = picTextConsultation || {}
  const num = Math.max(Quantity - ConsumedQuantity, 0)
  const onClickBtn = useCallback(() => {
    if (!num || !painManagementId) return
    Navigate.couponDetail({ id: painManagementId })
  }, [num, painManagementId])
  if (!picTextConsultation || Quantity === 0) return null
  return (
    <PlanBenefitsCard
      containerClass={style.marTop16}
      onClickBtn={onClickBtn}
      title="咨询卡权益"
      btnText="查看"
    >
      <View className={style.container} onClick={onClickBtn}>
        <Image src={Images.managePlan.icon_plan_pic_text} className={style.image} />
        <View className={style.content}>
          <View className={style.header}>
            <Text className={style.title}>{COUPON_TITLE_ENUM.Consultation}</Text>
            <Text className={style.num}>{`x${num || 0}`}</Text>
          </View>
          <Text className={style.desc}>{TIP_TEXT}</Text>
        </View>
      </View>
    </PlanBenefitsCard>
  )
}
export default PicTextRightCard
